<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <meta name="format-detection" content="address=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="browsermode" content="application" />
    <meta name="x5-page-mode" content="app" />
    <title>补充个人信息</title>
    <meta charset="utf-8" />
    <link href="../css/main.css?rev=@@hash" rel="stylesheet" />
    <link href="../css/mui.min.css?rev=@@hash" rel="stylesheet" />
    <link href="../css/mui.picker.css?rev=@@hash" rel="stylesheet" />
    <link href="../css/mui.poppicker.css?rev=@@hash" rel="stylesheet" />
    <style>
        body {
            width: 3.75rem;
            background: url(../img/checkBg.png) no-repeat fixed;
            background-size: 100% 100%;
        }

        .personInfoContain {
            width: 3.43rem;
            margin: .2rem auto;
            background: rgba(255, 255, 255, 0.9);
            border-radius: .2rem;
            margin-bottom: .1rem;
        }

        .cells_title {
            width: 3.43rem;
            text-align: center;
            color: #fe3267;
            margin: .16rem auto .19rem;
            padding: 0;
            border-radius: .2rem;
        }

        .cells_title>span {
            color: #606060;
        }

        .cells {
            position: static;
            transform: translate(0, 0);
            border-radius: 0 0 .2rem .2rem;
            box-shadow: 0 0 0 #fff;
            margin: 0 auto;
            background: rgba(255, 255, 255, 0);
        }

        .cell {
            padding: .13rem .22rem .13rem;
        }

        .operatorContent {
            width: 100%;
            overflow: hidden;
        }

        .txt {
            text-align: left;
        }

        .getCode {
            color: red;
            font-size: .12rem;
        }

        .cell_ft img {
            display: block;
            ;
            width: .2rem;
            height: .1rem;
        }

        .cells_tips {
            margin: 0.05rem .4rem;
            font-size: .12rem;
        }

        .cells_tips a {
            color: red;
        }

        .submitBtn {
            width: 3.43rem;
            position: static;
            margin: .25rem auto;
            background-color: #3276fe;
            border-radius: 45px;
            box-shadow: 0 0 0 #fff;
        }

        select {
            border: 0;
            float: right;
            width: 1.2rem;
            height: .2rem;
            appearance: none;
            -moz-appearance: none;
            -webkit-appearance: none;
            background: url("../images/gogogo.png");
            background-repeat: no-repeat;
            background-size: 18% 100%;
            background-position: 100% 0%;
            /*为下拉小箭头留出一点位置，避免被文字覆盖*/
            padding: 0 .14rem;
            font-size: .14rem;
        }

        .addressChoose {
            width: .7rem;
            background-size: 30% 100%;
        }

        select::-ms-expand {
            display: none;
        }

        select option {
            width: 1.2rem;
            height: .2rem;
            font-size: .14rem;
            background-color: white;
        }

        .cell_cn img {
            position: absolute;
            top: .12rem;
            right: .4rem;
            width: .2rem;
            height: .2rem;
        }

        .placeholderTxt {
            width: 90%;
            background-size: 25% 100%;
        }

        .cellIconImg {
            width: .24rem;
            height: .24rem;
            margin-bottom: -.06rem;
            margin-right: .02rem;
        }

        .cell_hd {
            min-width: 0;
        }

        .selectTxt {
            float: left;
            display: inline-block;
            font-size: .14rem;
            color: #c4c4c4;
        }
        #relationshipTel1,#relationshipTel2,
        #relationshipName1,#relationshipName2{
        	font-size: .14rem;
    		color: #c4c4c4;
        }
        .empty {
            height: 1px;
        }

        .arrowImg {
            float: right;
            display: inline-block;
            width: .18rem;
            height: .18rem;
        }
        h6.tips{
        	color: #fe3267;
        }
        .personInfoContain input {
            border: none;
            margin: 0;
            padding: 0;
            background: rgba(255, 255, 255, 0);
        }

        .mui-pciker-list li.highlight {
            color: #0064ff;
        }

        .mui-poppicker-btn-cancel {
            border-radius: 25px;
        }

        .mui-btn-blue,
        .mui-btn-primary,
        input[type=submit] {
            color: #fff;
            border: 1px solid #3276FE;
            background-color: #3276FE;
            border-radius: 25px;
        }

        header {
            width: 100%;
            height: .44rem;
            line-height: .44rem;
            position: fixed;
            left: 0;
            top: 0;
            background: #3276fe;
            z-index: 10;
        }

        header img,
        header span {
            display: inline-block;
            float: left;
        }

        header .backIcon {
            width: .24rem;
            height: .24rem;
            margin: .1rem 0 0 .16rem;
        }

        header .pageTitle {
            width: 80%;
            text-align: center;
            color: #fff;
            font-size: .17rem;
        }

        header .refresh {
            float: right;
            margin-right: .16rem;
            font-size: .14rem;
            color: #fff;
        }
    </style>
</head>

<body>
    <!-- 蒙版 -->
    <div class="layer_load">
        <div class="layer_mask"></div>
        <div class="layer_load_icon icon-loading"></div>
    </div>
    <!--<header>
        <a href="identification.html">
            <img class="backIcon" src="../img/backIcon.png" />
        </a>
        <span class="pageTitle">补充信息</span>
        <span class="refresh"></span>
    </header>-->
    <div class="personInfoContain">
        <div class="empty"></div>
        <div class="cells_title">
            <img class="cellIconImg" src="../img/tipConfirm.png">请完善信息</div>
        <div class="cells">
            <div class="cell">
                <label class="cell_hd">
                    <img class="cellIconImg cellIcons" src="../img/person1.png">
                </label>
                <div id="showAddress" class="placeholderTxt">
                    <span class="selectTxt">请选择所在省份</span>
                    <img class="arrowImg" src="../images/gogogo.png">
                </div>
            </div>

            <div class="cell">
                <label class="cell_hd">
                    <img class="cellIconImg cellIcons" src="../img/person2.png">
                </label>
                <div class="cell_cn">
                    <input type="text" class="txt" placeholder="请输入您的详细地址" id="addressDetail" maxlength="20" />
                </div>
            </div>
            <div class="cell">
                <label class="cell_hd">
                    <img class="cellIconImg cellIcons" src="../img/person3.png">
                </label>
                <div id="education" class="placeholderTxt">
                    <span class="selectTxt">请选择学历</span>
                    <img class="arrowImg" src="../images/gogogo.png">
                </div>
            </div>
            <div class="cell">
                <label class="cell_hd">
                    <img class="cellIconImg cellIcons" src="../img/person4.png">
                </label>
                <div class="cell_cn">
                    <input type="email" class="txt" placeholder="请填写邮箱" id="emailAddress" maxlength="24" />
                </div>
            </div>
            <div class="cell">
                <label class="cell_hd">
                    <img class="cellIconImg cellIcons" src="../img/person5.png">
                </label>
                <div class="cell_cn">
                    <input type="text" class="txt" placeholder="请填写QQ或微信账号" id="txtName" maxlength="16" />
                </div>
            </div>
        </div>
    </div>
    <div class="personInfoContain">
        <div class="empty"></div>
        <div class="cells_title">
            <span>亲属联系人
                <span style="font-size: .16rem;">①</span>
            </span>
            <h6 class="tips">选择联系人时，请提供常用联系人以提高审核通过几率</h6>
        </div>
        <div class="cells">

            <div class="cell">
                <label class="cell_hd">
                    <img class="cellIconImg cellIcons" src="../img/person6.png">
                </label>
                <div class="cell_cn" id="relationshipName1">
                    请选择亲属姓名 
                </div>
            </div>
            <div class="cell">
                <label class="cell_hd">
                    <img class="cellIconImg cellIcons" src="../img/person7.png">
                </label>
                <div class="cell_cn" id="relationshipTel1">
                    		亲属电话
                </div>
            </div>
            <div class="cell">
                <label class="cell_hd">
                    <img class="cellIconImg cellIcons" src="../img/person6.png">
                </label>
                <div id="relationship1" class="placeholderTxt">
                    <span class="selectTxt">请选择亲属关系</span>
                    <img class="arrowImg" src="../images/gogogo.png">
                </div>
            </div>            
        </div>
    </div>
    <div class="personInfoContain">
        <div class="empty"></div>
        <div class="cells_title">
            <span>亲属联系人
                <span style="font-size: .16rem;">②</span>
            </span>
            <h6 class="tips">选择联系人时，请提供常用联系人以提高审核通过几率</h6>
        </div>
        <div class="cells">
            <div class="cell">
                <label class="cell_hd">
                    <img class="cellIconImg cellIcons" src="../img/person6.png">
                </label>
                <div class="cell_cn" id="relationshipName2">
                    		请选择亲属姓名  
                </div>
            </div>
            <div class="cell">
                <label class="cell_hd">
                    <img class="cellIconImg cellIcons" src="../img/person7.png">
                </label>
                <div class="cell_cn" id="relationshipTel2">
                    		亲属电话
                </div>
            </div>
            <div class="cell">
                <label class="cell_hd">
                    <img class="cellIconImg cellIcons" src="../img/person6.png">
                </label>
                <div id="relationship2" class="placeholderTxt">
                    <span class="selectTxt">请选择亲属关系</span>
                    <img class="arrowImg" src="../images/gogogo.png">
                </div>
            </div>            
        </div>
    </div>
    <div class="operatorContent confirmBtn">
        <div class="submitBtn">
            提交
        </div>
    </div>

    <!-- 脚本 -->
    <script src="../lib/zepto.min.js?rev=@@hash"></script>
    <script src="../js/main.js?rev=@@hash"></script>
    <script src="../js/mui.min.js?rev=@@hash"></script>
    <script src="../js/mui.picker.min.js?rev=@@hash"></script>
    <script src="../js/mui.poppicker.js?rev=@@hash"></script>
    <script src="../js/city.data-3.js?rev=@@hash"></script>
    <script>
        (function (global, userUtil, layer) {
            $("body").height(document.documentElement.clientHeight);
            var sessionId = userUtil.sid(), provinceName, cityName, districtName;
            var _data = {
                "sessionId": sessionId
            };
            var cityListData;



            // 获取省份、省市县列表获取
            // function getAddress(id, type) {
            //     var _data = {
            //         "sessionId": sessionId,
            //         "id": id,
            //         "type": type
            //     }
            //     $.ajax({
            //         url: global.localUrl + "system/provinceCityList",
            //         type: "post",
            //         data: JSON.stringify(_data),
            //         contentType: 'application/json;charset=utf-8',
            //         success: function (re) {
            //             if (1 == re.code) {
            //                 cityListData = re.data;
            //                 console.log(cityListData)
            //             }
            //             else {
            //                 layer.tips(re.message);
            //             }
            //         },
            //         error: function () {
            //             layer.tips(global.netError);
            //         }
            //     });
            // }
            // getAddress(1, 1);
            
            
            ////上传通讯录
               function uploadContacts() { 
                   var _data = {
                       "sessionId": sessionId,
                       "orderNo": localStorage.getItem("orderNo"),
                       "contactStr": "JSON.stringify(contactsList)"
                   };
                 
                   $.ajax({
                       url: global.localUrl + "wallet/orders/saveHbUserContact",
                       type: "post",
                       data: JSON.stringify(_data),
                       contentType: 'application/json;charset=utf-8',
                       success: function (re) {
                           if (1 == re.code) {
                               console.log(re)
                           }
                           else {
                               layer.tips(re.message);
                           }
                       },
                       error: function () {
                           layer.tips(global.netError);
                       }
                   });
               }           
            //uploadContacts();

            //选择省市区 
            $("#showAddress").on("click", function () {
                var u = navigator.userAgent;
                var ios = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
                var android = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //android终端
                var city_picker = new mui.PopPicker({
                    layer: 3
                });
                //var newData = getCityPickData(cityListData);
                //city_picker.setData(newData);
                city_picker.setData(cityData3);
                setTimeout(function () {
                    city_picker.show(function (items) {
                        if ((items[0] || {}).text == undefined) {
                            (items[0] || {}).text = "";
                        } else if ((items[1] || {}).text == undefined) {
                            (items[1] || {}).text = "";
                        } else if ((items[2] || {}).text == undefined) {
                            (items[2] || {}).text = "";
                        }
                        //该ID为接收城市ID字段 
                        $("#showAddress .selectTxt").text((items[0] || {}).text + "" + (items[1] || {}).text + "" + (items[2] || {}).text).css('color','#000');
                    });
                }, 200);
            });
    

            ////获取城市列表赋值
            function getCityPickData(data) {
                var retData1 = new Array();
                var retData2 = new Array();
                var retData3 = new Array();
                for (var i = 0; i < data.provinceList.length; i++) {
                    retData1[i] = {
                        value: data.provinceList[i].provinceId,
                        text: data.provinceList[i].provinceName,
                        children: retData2
                    }
                }
                for (var i = 0; i < data.cityList.length; i++) {
                    retData2[i] = {
                        value: data.cityList[i].cityId,
                        text: data.cityList[i].cityName,
                        //value2: data.cityList[i].provinceId,
                        children: retData3
                    }
                }
                for (var i = 0; i < data.districtList.length; i++) {
                    retData3[i] = {
                        value: data.districtList[i].cityId,
                        text: data.districtList[i].districtName,
                        //value2: data.districtList[i].districtId,
                    }
                }
                return retData1;
                return retData2;
                return retData3;

            }

            ///选择学历   
            $("#education").on("click", function () {
                var city_picker = new mui.PopPicker({
                    layer: 1
                });
                city_picker.setData([{//设置弹出列表的信息，假如是二联，还需要一个children属性
                    text: "硕士及以上"
                }, {
                    text: "本科"
                }, {
                    text: "大专"
                }, {
                    text: "中专/高中及以下"
                }]);
                setTimeout(function () {
                    city_picker.show(function (items) {
                        if ((items[0] || {}).text == undefined) {
                            (items[0] || {}).text = "";
                        }
                        $("#education .selectTxt").text((items[0] || {}).text).css('color','#000');
                    });
                }, 200);
            });
            //////选择亲属关系1
            $("#relationship1").on("click", function () {
                var city_picker = new mui.PopPicker({
                    layer: 1
                });
                city_picker.setData([{//设置弹出列表的信息，假如是二联，还需要一个children属性
                    text: "父亲/母亲"
                }, {
                    text: "丈夫/妻子"
                }, {
                    text: "儿子/女儿"
                }, {
                    text: "兄弟/姐妹"
                }]);
                setTimeout(function () {
                    city_picker.show(function (items) {
                        if ((items[0] || {}).text == undefined) {
                            (items[0] || {}).text = "";
                        }
                        $("#relationship1 .selectTxt").text((items[0] || {}).text).css('color','#000');
                    });
                }, 200);
            });
            //////选择亲属关系2
            $("#relationship2").on("click", function () {
                var city_picker = new mui.PopPicker({
                    layer: 1
                });
                city_picker.setData([{//设置弹出列表的信息，假如是二联，还需要一个children属性
                    text: "父亲/母亲"
                }, {
                    text: "丈夫/妻子"
                }, {
                    text: "儿子/女儿"
                }, {
                    text: "兄弟/姐妹"
                }]);
                setTimeout(function () {
                    city_picker.show(function (items) {
                        if ((items[0] || {}).text == undefined) {
                            (items[0] || {}).text = "";
                        }
                        $("#relationship2 .selectTxt").text((items[0] || {}).text).css('color','#000');
                    });
                }, 200);
            });


            // 提交/
            $(".submitBtn").click(function () {
                layer.showLoad();
                var u = navigator.userAgent;
                var ios = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
                var android = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //android终端
                var _data = {
                	"userUuid" : localStorage.getItem("userID") ,
                    "client_type": ios || android ? "ios" : "android",  //////设备类型                    
                    "email": $(".cell_cn input").eq(0).val(),
                    "sessionId": sessionId,
                    "orderNo": localStorage.getItem("orderNo"), ////订单号
                    "inhabit": $('#showAddress .selectTxt').text(),////居住地址
                    "detailed": $('#addressDetail').val(), ////详细地址
                    "kinship": $('#relationship1 .selectTxt').text(),  ////亲属关系1
                    "immediateRelativesName": $('#relationshipName1').text(), ////亲属姓名1
                    "immediateRelativesMobile": $('#relationshipTel1').text(), ////亲属手机号1
                    "academic": $("#education .selectTxt").text(), ////学历
                    "secondKinship": $('#relationship2 .selectTxt').text(),////第二联系人亲属关系
                    "secondRelativesName": $('#relationshipName2').text(),///第二联系人姓名
                    "secondRelativesMobile": $('#relationshipTel2').text(),////第二联系人电话
                    "socialAccount": $("#txtName").val(),/////社交方式（qq或微信）
                    "companyAdress": "gdfg",///单位地址
                    "companyDetailAdress": "dgdf",////单位详细地址
                    "companyName": "23423423", ////单位名称
                    "lbsY": "sdfsdfs",////纬度
                    "lbsX": "gdfgdf",////经度
                    "actualInhabit": "dfgdf",///Xy解析后的实际居住地址                    
                };

                for (var e in _data) {
                    if (!_data[e]) { layer.hideLoad(); layer.tips("请填写完整信息"); return; }
                }
                $.ajax({
                    url: global.localUrl + "wallet/orders/infoComplete",
                    type: "post",
                    data: JSON.stringify(_data),
                    contentType: 'application/json;charset=utf-8',
                    success: function (re) {
                        console.log(re)
                        if (1 == re.code) {
                            layer.hideLoad();
                            setTimeout(function () {
                                //window.location.href = global.localUrl + "trust/identification.html";
                                layer.tips("认证成功");
                                window.location.href = "identification.html";
                            }, 2000);
                        }
                        else {
                            layer.hideLoad();
                            setTimeout(function () {
                                layer.tips(re.message);
                            }, 2000);
                        }
                    },
                    error: function () {

                        layer.hideLoad();
                        setTimeout(function () {
                            layer.tips(global.netError);
                        }, 2000);
                    }
                });
            })
            // 邮箱校验
            $("#emailAddress").blur(function () {
                if ($("#emailAddress").val().search(/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/) != -1)
                    return true;
                else
                    layer.tips("邮箱格式不正确");
            })
            
            
            //获取通讯录
            $("#relationshipTel1").click(function(){
                currentNum=1;
                jsBridgess.getContacts();
            })
            $("#relationshipTel2").click(function(){
                currentNum=2;
                jsBridgess.getContacts();

            })
            $("#relationshipName1").click(function(){
                currentNum=1;
                jsBridgess.getContacts();
            })
            $("#relationshipName2").click(function(){
                currentNum=2;
                jsBridgess.getContacts();

            })            
            //app交互
            var jsBridgess = (function () {   

                function connectWebViewJavascriptBridge(callback) {
                    if (window.WebViewJavascriptBridge) {
                        callback(WebViewJavascriptBridge);
                    } else {
                        document.addEventListener('WebViewJavascriptBridgeReady', function () {
                            callback(WebViewJavascriptBridge);
                        }, false)
                    }
                }
                
                connectWebViewJavascriptBridge(function (WebViewJavascriptBridge) {
                    WebViewJavascriptBridge.init(function (message, responseCallback) {

                    });
                    WebViewJavascriptBridge.registerHandler("contactsList", function(data, responseCallback) {
                        phoneNumbers=(data);
                        $.ajax({
                            url: global.localUrl + "wallet/orders/saveHbUserContact",
                            type: "post",
                            data: JSON.stringify({"orderNo": localStorage.getItem("orderNo"),"contactStr": (phoneNumbers),"sessionId": sessionId}),
                            contentType: 'application/json;charset=utf-8',       
                            success: function (re) {
                            	
                            },
                            error: function () {
                                layer.tips(re.message);
                            }
                        });
                    });
                    WebViewJavascriptBridge.registerHandler("contacts", function(data, responseCallback) {
                        var datas=JSON.parse(data);
                        
                        if(currentNum==1){
                            name1=datas.name;
                            tel1=datas.phone;
                            $('#relationshipName1').text(datas.name).css("color", "#000");
                            $("#relationshipTel1").text(datas.phone).css("color", "#000");
                        }else {
                            name2=datas.name;
                            tel2=datas.phone;
                            $('#relationshipName2').text(datas.name).css("color", "#000");
                            $("#relationshipTel2").text(datas.phone).css("color", "#000");
                        }
                    });

                    fn && fn();
                        
                })
                return {
                    init: function (fn) {
                        connectWebViewJavascriptBridge(function (WebViewJavascriptBridge) {
                            WebViewJavascriptBridge.init(function (message, responseCallback) {

                            });

                            fn && fn();

                        })
                    },    
                    getContacts: function (callback) {
                        WebViewJavascriptBridge.callHandler('getContacts', {}, function (response) { callback(response); });
                    },
                }
            })();

        })(global, userUtil, layer)
    </script>
</body>

</html>